<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咨询管理 - 鲜时蔬管理员系统</title>

    <!--引入的vue.js-->
    <script src="../../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="../../css/index.css">
    <!--引入elementUI的js-->
    <script src="../../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../../js/axios.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f5f5f5; }
        .container { padding: 20px; }
        .header { background: #393D49; color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
        .header-title { font-size: 18px; font-weight: bold; }
        .user-info { display: flex; align-items: center; }
        .user-info span { margin-right: 15px; }
        .main-content { margin-top: 20px; background: #fff; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 20px; }
        .search-bar { margin-bottom: 20px; display: flex; gap: 10px; align-items: center; }
        .status-select { width: 200px; }
        .table-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
        .reply-dialog .el-dialog__body { padding: 20px; }
        .reply-content { margin-top: 15px; }
        .message-detail { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
        .detail-label { font-weight: bold; margin-right: 5px; }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-title">鲜时蔬管理员系统 - 咨询管理</div>
    </div>

    <!-- 主内容区 -->
    <div class="container">
        <div class="main-content">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 200px;"></el-input>
                <el-input v-model="queryParams.phone" placeholder="请输入电话" clearable style="width: 200px;"></el-input>
                <el-select v-model="queryParams.status" placeholder="请选择状态" class="status-select">
                    <el-option label="全部" value="">全部</el-option>
                    <el-option label="未回复" value="0"></el-option>
                    <el-option label="已回复" value="1"></el-option>
                </el-select>
                <el-select v-model="queryParams.type" placeholder="请选择咨询类型" class="status-select">
                    <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="loadMessageList">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </div>

            <!-- 咨询列表 -->
            <el-table
                    :data="messageList"
                    border
                    stripe
                    style="width: 100%;"
                    v-loading="loading"
            >
                <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="咨询人" width="120"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
                <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
                <el-table-column label="咨询类型" width="120">
                    <template slot-scope="scope">
                        <span>{{ getTypeName(scope.row.type) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 0" type="warning">未回复</el-tag>
                        <el-tag v-else type="success">已回复</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showDetail(scope.row)">查看</el-button>
                        <el-button type="text" @click="showReplyDialog(scope.row)" v-if="scope.row.status === 0" style="color:#409EFF">回复</el-button>
                        <span v-else style="color:#909399">已回复</span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="table-footer">
                <div>共 {{ total }} 条记录</div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNo"
                        :page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="total"
                        layout="sizes, prev, pager, next"
                ></el-pagination>
            </div>
        </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
            title="咨询详情"
            :visible.sync="detailVisible"
            width="60%"
            :close-on-click-modal="false"
    >
        <div class="message-detail">
            <p><span class="detail-label">咨询人：</span>{{ currentMessage.name }}</p>
            <p><span class="detail-label">联系电话：</span>{{ currentMessage.phone }}</p>
            <p><span class="detail-label">邮箱：</span>{{ currentMessage.email }}</p>
            <p><span class="detail-label">咨询类型：</span>{{ getTypeName(currentMessage.type) }}</p>
            <p><span class="detail-label">提交时间：</span>{{ currentMessage.createTime }}</p>
            <p><span class="detail-label">咨询内容：</span></p>
            <p style="margin-top: 5px; line-height: 1.6; padding: 10px; background: #f5f5f5; border-radius: 4px;">
                {{ currentMessage.content }}
            </p>
        </div>

        <div v-if="currentMessage.status === 1">
            <p><span class="detail-label">回复时间：</span>{{ currentMessage.replyTime }}</p>
            <p><span class="detail-label">回复内容：</span></p>
            <p style="margin-top: 5px; line-height: 1.6; padding: 10px; background: #f0f9eb; border-radius: 4px; border-left: 3px solid #52c41a;">
                {{ currentMessage.replyContent }}
            </p>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="detailVisible = false">关闭</el-button>
            <el-button type="primary" @click="showReplyDialog(currentMessage)" v-if="currentMessage.status === 0">回复</el-button>
        </div>
    </el-dialog>

    <!-- 回复对话框 -->
    <el-dialog
            title="回复咨询"
            :visible.sync="replyVisible"
            width="60%"
            :close-on-click-modal="false"
            class="reply-dialog"
    >
        <p><span class="detail-label">咨询人：</span>{{ currentMessage.name }}</p>
        <p><span class="detail-label">咨询类型：</span>{{ getTypeName(currentMessage.type) }}</p>
        <p><span class="detail-label">咨询内容：</span></p>
        <p style="margin-top: 5px; line-height: 1.6; padding: 10px; background: #f5f5f5; border-radius: 4px; margin-bottom: 15px;">
            {{ currentMessage.content }}
        </p>

        <el-form>
            <el-form-item label="回复内容" class="reply-content">
                <el-input
                        v-model="replyContent"
                        type="textarea"
                        rows="6"
                        placeholder="请输入回复内容"
                        maxlength="500"
                ></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="replyVisible = false">取消</el-button>
            <el-button type="primary" @click="submitReply" :loading="replyLoading">提交回复</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                adminInfo: null,
                messageList: [],
                total: 0,
                pageNo: 1,
                pageSize: 10,
                loading: false,
                queryParams: {
                    name: '',
                    phone: '',
                    status: '',
                    type: ''
                },
                currentMessage: {},
                detailVisible: false,
                replyVisible: false,
                replyContent: '',
                replyLoading: false,
                typeOptions: [
                    { label: '全部', value: '' },
                    { label: '订单问题', value: '0' },
                    { label: '产品咨询', value: '1' },
                    { label: '配送问题', value: '2' },
                    { label: '投诉建议', value: '3' },
                    { label: '其他问题', value: '4' }
                ],
            }
        },
        mounted() {
            this.checkLogin();
        },
        methods: {
            checkLogin() {
                // 实际项目中可调用登录验证接口
                this.adminInfo = { username: 'admin' }; // 模拟登录
                this.loadMessageList();
            },
            getTypeName(type) {
                const map = {
                    '0': '订单问题',
                    '1': '产品咨询',
                    '2': '配送问题',
                    '3': '投诉建议',
                    '4': '其他问题'
                };
                return map[type] || type;
            },
            loadMessageList() {
                this.loading = true;
                axios.post('/vegetablemarketexpress/contact/page', {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    data: this.queryParams
                }).then(res => {
                    this.loading = false;
                    const { list, total } = res.data.data;
                    this.messageList = list;
                    this.total = total;
                }).catch(err => {
                    this.loading = false;
                    this.$message.error('加载失败：' + err.message);
                });
            },
            resetQuery() {
                this.queryParams = { name: '', phone: '', status: '', type: ''  };
                this.loadMessageList();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.pageNo = 1;
                this.loadMessageList();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.loadMessageList();
            },
            showDetail(row) {
                this.currentMessage = row;
                this.detailVisible = true;
            },
            showReplyDialog(row) {
                this.currentMessage = row;
                this.replyContent = '';
                this.replyVisible = true;
            },
            submitReply() {
                if (!this.replyContent.trim()) {
                    this.$message.warning('请输入回复内容');
                    return;
                }
                this.replyLoading = true;
                axios.post(`/vegetablemarketexpress/contact/reply/${this.currentMessage.id}`, null, {
                    params: { replyContent: this.replyContent }
                }).then(res => {
                    this.replyLoading = false;
                    this.$message.success('回复成功');
                    this.replyVisible = false;
                    this.loadMessageList();
                }).catch(err => {
                    this.replyLoading = false;
                    this.$message.error('回复失败：' + err.message);
                });
            }
        }
    });
</script>
</body>
</html>